<template>
  <div id="abox">
    <ExpHeader :title="title" :musicUrl="musicurl" style="position: absolute;width: 100%;z-index: 1;" ref="expHeader"></ExpHeader>
    <div id="expAside">
      <div id="topCard">
        <LogoCard :materialurl="materialurl" :modelurl="modelurl" :scale="modelscale"></LogoCard>
      </div>
      <div id="bottomCard">
        <dv-border-box-11 title="北约扩张">
          <div id="leftButtonArea">
            <MyButton :is-ban="btnIsDis" @click="firstExpantion()">第1次扩张</MyButton>
            <MyButton :is-ban="btnIsDis" @click="secondExpantion()">第2次扩张</MyButton>
            <MyButton :is-ban="btnIsDis" @click="thirdExp()">第3次扩张</MyButton>
            <MyButton :is-ban="btnIsDis" @click="fourthExp()">第4次扩张</MyButton>
            <MyButton :is-ban="btnIsDis" @click="fifthExp()">第5次扩张</MyButton>
            <MyButton :is-ban="btnIsDis" @click="sixthExp()">第6次扩张</MyButton>
            <MyButton :is-ban="btnIsDis" @click="seventhExp()">第7次扩张</MyButton>
            <MyButton :is-ban="btnIsDis" @click="eighthExp()">第8次扩张</MyButton>
          </div>
        </dv-border-box-11>
      </div>
    </div>
    <div id="expRightSide">
      <!--                  地图图例                     -->
      <div class="rightSideBox">
        <dv-border-box-7 ref="relatedImg">
          <p class="cardTitile">地图图例</p>
          <el-divider>
            <el-icon>
              <star-filled/>
            </el-icon>
          </el-divider>
          <MapLegendCard></MapLegendCard>
        </dv-border-box-7>
      </div>
      <div class="rightSideBox">
        <dv-border-box-7 ref="newJoinCountry">
          <p class="cardTitile">国家比例图</p>
          <el-divider>
            <el-icon>
              <star-filled/>
            </el-icon>
          </el-divider>
          <FillRingDiagram :countyNumber="countyNumber"></FillRingDiagram>
        </dv-border-box-7>
      </div>
      <div class="rightSideBox">
        <dv-border-box-7 ref="newJoinCountry">
          <p class="cardTitile">新加入国家</p>
          <el-divider>
            <el-icon>
              <star-filled/>
            </el-icon>
          </el-divider>
          <p class="cardNoneTip" v-if="newCountryData.length==0">暂无国家</p>
          <ul style="padding: 0 30px;max-height: 15vh;overflow-y: scroll;">
            <el-row>
              <el-col :span="12" v-for="(country,index) in newCountryData">
                <li>
                  <img :src="country.flagUrl" style="height: 30px;">
								  <p>{{ country.name }}</p>
                </li>
              </el-col>
            </el-row>
          </ul>
        </dv-border-box-7>
      </div>
    </div>
    <!-- 台词区域 -->
    <div id="LinePrompt" ref="LinePrompt">
      <transition name="el-fade-in">
        <div v-show="show" class="transition-box">{{PromptText}}</div>
      </transition>
    </div>
    <MapView :viewData="viewData" ref="MapView"></MapView>
   <!-- 弹窗区域 -->
    <el-dialog
        v-model="centerDialogVisible"
        title="权限请求"
        :show-close = false
        :close-on-click-modal = false
        width="30%"
        center>
      <p style="width: 100%;text-align: center">是否需要开启背景音乐?开启音乐效果更佳!</p>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeBgMusic()">关闭</el-button>
        <el-button type="primary" @click="openBgMusic()">开启</el-button>
      </span>
      </template>
    </el-dialog>
  </div>

</template>

<script>
import {StarFilled} from '@element-plus/icons-vue'
import ExpHeader from "../../components/exphistory/ExpHeader.vue"
import LogoCard from "../../components/exphistory/3dLogoCard.vue"
import MyButton from "../../components/button/BlueButton.vue"
import MapView from "../../components/card/MapView.vue"
import FillRingDiagram from "../../components/card/EchartsFillRingDiagram.vue"
import MapLegendCard from "../../components/card/MapLegendCard.vue"
import LinePromptCard from "../../components/card/LinePromptCard.vue"

import 'echarts-gl';
import "../../assets/js/world.js"

export default {
  components: {
    ExpHeader,
    LogoCard,
    MyButton,
    MapView,
    StarFilled,
    FillRingDiagram,
    MapLegendCard,
    LinePromptCard
  },
  data() {
    return {
      btnIsDis:true,
      centerDialogVisible:false,
      musicurl: "music/NatoAndWtoMapBg.mp3",
      materialurl: "model/nato/natoLogo/i.mtl",
      modelurl: "model/nato/natoLogo/i.obj",
      modelscale: 0.015,
      MapOption: {},
      title: "北约扩张历史",
      buttonState: "",
      countrys: [],
      listEventState: 0,
      countyNumber:{
        wto:0,
        nato:12,
        comm:183
      },
      viewData: {
        oldCountry: [],
        newCountry: [],
        wtoCountry: []
      },
      newCountryData: [],
      relatedPhoto: [],
      PromptText:"",
      show:false,
    }
  },
  mounted() {

  },
  watch:{
  },
  methods: {
    // 开启背景音乐
    openBgMusic(){
      this.$refs.expHeader.autoPlay() ;
      this.centerDialogVisible = false ;
      this.$refs.MapView.openingAnimation()
    },
    closeBgMusic(){
      this.centerDialogVisible = false ;
      this.$refs.MapView.openingAnimation()
    },
    showPromptText(text,startTime,endTime){
      startTime = (startTime + 0.2) * 1000 ;
      endTime = (endTime + 0.2) * 1000 ;
      setTimeout(()=>{
        this.show = true
        this.PromptText = text
      },startTime)
      setTimeout(()=>{
        this.show = false
      },endTime-200)
    },
    showDialog(){
      var linePromptDom = this.$refs.LinePrompt    ;
      linePromptDom.classList.remove("animationEnd");
      linePromptDom.classList.add("animationStart");
    },
    closeDialog(){
      var linePromptDom = this.$refs.LinePrompt    ;
      linePromptDom.classList.remove("animationStart");
      linePromptDom.classList.add("animationEnd");
    },
    //屏幕自适应
    fixBorder() {
      this.$refs.relatedImg.initWH();
      this.$refs.newJoinCountry.initWH();
    },
    screenAdapter() {
      const adapterOption = {};
      this.chartMap.setOption(adapterOption);
      this.chartMap.resize();
    },
    firstExpantion() {
      var linePromptDom = this.$refs.LinePrompt    ;
      this.countyNumber.nato = 12 ;
      this.countyNumber.wto = 0 ;
      this.countyNumber.comm = 183 ;
      this.$refs.MapView.hidePointer3dLabel();
      this.viewData = {
        oldCountry: ["United States", "Canada", "United Kingdom", "Belgium", "France", "Netherlands",
          "Luxembourg", "Denmark", "Norway", "Iceland", "Portugal", "Italy"
        ],
        newCountry: ["Turkey", "Greece"],
      }
      this.listEventState = 1
      this.newCountryData = [{
        name: "土耳其",
        flagUrl: "img/flag/Turkey.png"
      }, {
        name: "希腊",
        flagUrl: "img/flag/Greece.png"
      }]
      this.$refs.MapView.oneExp()
      this.fixBorder()
    },
    secondExpantion() {
      this.$refs.MapView.hidePointer3dLabel();
      this.countyNumber.nato = 12 ;
      this.countyNumber.wto = 8 ;
      this.countyNumber.comm = 175 ;

      this.listEventState = 2
      this.viewData = {
        oldCountry: ["United States", "Canada", "United Kingdom", "Belgium", "France", "Netherlands",
          "Luxembourg", "Denmark", "Norway", "Iceland", "Portugal", "Italy", "Turkey", "Greece"
        ],
        newCountry: ["Germany"],
        wtoCountry: []
      }
      this.newCountryData = [{
        name: "联邦德国",
        flagUrl: "img/flag/WestGermany.png"
      }]
      this.$refs.MapView.twoExp()
      this.fixBorder()
    },
    thirdExp() {
      this.countyNumber.nato = 16 ;
      this.countyNumber.wto = 8 ;
      this.countyNumber.comm = 171 ;
      this.$refs.MapView.hidePointer3dLabel();

      this.viewData = {
        oldCountry: ["United States", "Canada", "United Kingdom", "Belgium", "France", "Netherlands",
          "Luxembourg", "Denmark", "Norway", "Iceland", "Portugal", "Italy", "Turkey", "Greece",
          "Germany"
        ],
        newCountry: ["Spain"],
      }
      this.newCountryData = [{
        name: "西班牙",
        flagUrl: "img/flag/Spain.png"
      }]
      this.listEventState = 3
      this.$refs.MapView.threeExp()
      this.fixBorder()
    },
    fourthExp() {
      this.countyNumber.nato = 19 ;
      this.countyNumber.wto = 8 ;
      this.countyNumber.comm = 168 ;
      this.$refs.MapView.hidePointer3dLabel();

      this.listEventState = 4
      this.viewData = {
        oldCountry: ["United States", "Canada", "United Kingdom", "Belgium", "France", "Netherlands",
          "Luxembourg", "Denmark", "Norway", "Iceland", "Portugal", "Italy", "Turkey", "Greece",
          "Germany", "Spain"
        ],
        newCountry: ["Czech Rep.", "Hungary", "Poland"]
      }
      this.newCountryData = [{name: "捷克共和国", flagUrl: "img/flag/Czech.png"}, {
        name: "匈牙利",
        flagUrl: "img/flag/Hungary.png"
      }, {name: "波兰", flagUrl: "img/flag/Poland.png"}]
      this.$refs.MapView.fourExp()
      this.fixBorder() ;
    },
    fifthExp() {
      this.countyNumber.nato = 26 ;
      this.countyNumber.wto = 0 ;
      this.countyNumber.comm = 169 ;
      this.$refs.MapView.hidePointer3dLabel();
      this.listEventState = 5
      this.viewData = {
        oldCountry: ["United States", "Canada", "United Kingdom", "Belgium", "France", "Netherlands",
          "Luxembourg", "Denmark", "Norway", "Iceland", "Portugal", "Italy", "Turkey", "Greece",
          "Germany", "Spain", "Czech Rep.", "Hungary", "Poland"
        ],
        newCountry: []
      }
      this.newCountryData = [{name: "保加利亚", flagUrl: "img/flag/Bulgaria.png"}, {
        name: "爱沙尼亚",
        flagUrl: "img/flag/Estonia.png"
      }, {name: "拉脱维亚", flagUrl: "img/flag/Latvia.png"},
        {name: "立陶宛", flagUrl: "img/flag/Lithuania.png"}, {
          name: "罗马尼亚",
          flagUrl: "img/flag/Romania.png"
        }, {name: "斯洛伐克", flagUrl: "img/flag/Slovakia.png"},
        {name: "斯洛文尼亚", flagUrl: "img/flag/Slovenia.png"}]
      this.$refs.MapView.fiveExp()
      this.fixBorder()
      },
    russiaBomb() {
      this.$refs.MapView.russiaNuClearBomb()
    },
    sixthExp() {
      this.countyNumber.nato = 28 ;
      this.countyNumber.wto = 0 ;
      this.countyNumber.comm = 167 ;
      this.$refs.MapView.hidePointer3dLabel();

      this.listEventState = 6
      this.viewData = {
        oldCountry: ["United States", "Canada", "United Kingdom", "Belgium", "France", "Netherlands",
          "Luxembourg", "Denmark", "Norway", "Iceland", "Portugal", "Italy", "Turkey", "Greece",
          "Germany", "Spain", "Czech Rep.", "Hungary", "Poland", "Bulgaria", "Estonia", "Latvia",
          "Lithuania",
          "Romania", "Slovakia", "Slovenia"
        ],
        newCountry: ["Albania", "Croatia"]
      }
      this.newCountryData = [{name: "阿尔巴尼亚", flagUrl: "img/flag/Albania.png"}, {
        name: "克罗地亚",
        flagUrl: "img/flag/Croatia.png"
      }]
      this.$refs.MapView.sixExp()
      this.fixBorder()
    },
    seventhExp() {
      this.countyNumber.nato = 29 ;
      this.countyNumber.wto = 0 ;
      this.countyNumber.comm = 166 ;
      this.$refs.MapView.hidePointer3dLabel();
      this.listEventState = 7
      this.viewData = {
        oldCountry: ["United States", "Canada", "United Kingdom", "Belgium", "France", "Netherlands",
          "Luxembourg", "Denmark", "Norway", "Iceland", "Portugal", "Italy", "Turkey", "Greece",
          "Germany", "Spain", "Czech Rep.", "Hungary", "Poland", "Bulgaria", "Estonia", "Latvia",
          "Lithuania",
          "Romania", "Slovakia", "Slovenia", "Albania", "Croatia"
        ],
        newCountry: ["Montenegro"]
      }
      this.newCountryData = [{name: "黑山", flagUrl: "img/flag/Montenegro.png"}]
      this.$refs.MapView.sevenExp();
      this.fixBorder()
    },
    eighthExp() {
      this.countyNumber.nato = 30 ;
      this.countyNumber.wto = 0 ;
      this.countyNumber.comm = 165 ;
      this.$refs.MapView.hidePointer3dLabel();
      this.listEventState = 8
      this.viewData = {
        oldCountry: [
           "United States", "Canada", "United Kingdom", "Belgium", "France", "Netherlands",
          "Luxembourg", "Denmark", "Norway", "Iceland", "Portugal", "Italy", "Turkey", "Greece",
          "Germany", "Spain", "Czech Rep.", "Hungary", "Poland", "Bulgaria", "Estonia", "Latvia",
          "Lithuania",
          "Romania", "Slovakia", "Slovenia", "Albania", "Croatia", "Montenegro"
        ],
        newCountry: ["Macedonia"]
      }
      this.newCountryData = [{name: "北马其顿", flagUrl: "img/flag/Macedonia.png"}]
      this.$refs.MapView.eightExp();
      this.fixBorder()
    }
  }
}
</script>

<style scoped="scoped">
@-webkit-keyframes contentMove{
  from{bottom: -500px;}
  to{ bottom: 2%;}
}

@-webkit-keyframes contentDownMove{
  from{bottom: 2%;}
  to{ bottom: -500px;}
}

ul {
  list-style: none;
}

ul li {
  text-align: center;
  margin: 5px 0px;
}

ul li a {
  text-decoration: none;
}

a:link {
  color: #000000;
}

a:visited {
  color: black;
}

a:hover {
  color: #003399;
}

a:active {
  color: #ccc;
}

#abox {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#expAside {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 250px;
}

#topCard {
  height: 150px;
  width: 100%;
}

#bottomCard {
  width: 100%;
  margin-top: 20px;
  height: 500px;
}

#leftButtonArea {
  display: flex;
  padding-top: 70px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#expMainMap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: 10px;
}

#expRightSide {
  position: absolute;
  z-index: 1;
  top: 100px;
  right: 0;
  display: flex;
  flex-direction: column;
  flex-flow: column;
  height: 80%;
}

.rightSideBox {
  width: 320px;
  height: 30vh;
  margin: 10px;
  /*-webkit-transition: height 3s;*/
}

#mapView {
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  padding: 5px;
}

.cardTitile {
  font-size: 25px;
  text-align: center;
}

.cardNoneTip {
  font-size: 20px;
  text-align: center;
  margin: 20px;
}

#LinePrompt {
  position: absolute;
  bottom: -300px;
  left: 50%;
  transform: translateX(-50%);
}

.animationStart{
  animation:contentMove 1s 1 forwards ;
}

.animationEnd{
  animation:contentDownMove 1s 1 forwards ;
}

#LinePrompt{
  min-width: 800px;
  height: 120px;
  border-radius: 10px;
  padding: 10px;
  background-color: rgba(85, 81, 81, 0.7);
  font-size: 5vh;
  text-align: center;
  color: #cccccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-header) {
  padding: 0;
}

:deep(.el-main) {
  padding: 0;
}

:deep(.el-divider__text) {
  background-color: transparent;
}

:deep(.el-divider--horizontal) {
  margin: 10px 0;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>
